<route>
    {
        meta: {
            layout: 'index',
            title:'岩性信息管理'
        }
    }  
</route>
<template>
    <view>
        <div class="app-container">
            <a-row>
                <a-input-search v-model:value="searchKey" placeholder="请输入岩性信息" enter-button="搜索"
                    style="width: 250px; margin-bottom: 10px;" @search="handleQuery()" />
                <a-button style="margin-left: 10px;" type="dashed" @click="reset">重置</a-button>
                <a-button type="primary" style="margin-left: auto; margin-bottom: 10px; width: 100px;" @click="addItem">
                    <template #icon><plus-outlined /></template>新增
                </a-button>
            </a-row>
            <a-table :dataSource="dataSource" :columns="columns" bordered :pagination="false">
                <template #bodyCell="{ column, text, record }">
                    <template v-if="column.dataIndex === 'image'">
                        <div style="margin-right: 8px;">
                            <a-image :width="80" :height="20" :src="`/dev-api/ufs/preview/${record.lithologyFile}`" />
                        </div>
                    </template>
                    <template v-else-if="column.dataIndex === 'action'">
                        <div style="margin-right: 8px;">
                            <span><a-button type="link" @click="editItem(record)">编辑</a-button>
                                <AntdZh><a-popconfirm title="确定删除该条记录 ?" @confirm="del(record.id)">
                                    <a-button type="link" danger>删除</a-button>
                                </a-popconfirm></AntdZh>
                            </span>
                        </div>
                    </template>
                </template>
            </a-table>
            <AntdZh>
                <a-pagination v-model:current="query.pageNum" v-model:pageSize="query.pageSize" :total="total"
                    @change="getList" />
            </AntdZh>

            <!-- 新版添加或修改部门对话框 -->
            <AntdConfirmModal :title='title ? "新增岩性信息" : "编辑信息"' ref="modalRef" width="600px" :keepSlot="false"
                @confirm="submitForm">
                <a-form :model="form" name="basic" :label-col="{ span: 10 }">
                    <a-row>
                        <a-col :span="18">
                            <a-form-item label="岩性代码" name="lithologyCode"
                                :rules="[{ required: true, message: '请输入岩性代码' }]">
                                <a-input v-model:value="form.lithologyCode" style="width: 300px;" placeholder="请输入岩性代码" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="18">
                            <a-form-item label="岩性名称" name="lithologyName"
                                :rules="[{ required: true, message: '请输入岩性名称' }]">
                                <a-input v-model:value="form.lithologyName" style="width: 300px;" placeholder="请输入岩性名称" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="18">
                            <a-form-item label="岩性分类" name="lithologyType">
                                <a-input v-model:value="form.lithologyType" style="width: 300px;"
                                    controls-position="right" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="18">
                            <a-form-item label="上传文件">
                                <a-upload v-model:fileList="fileList" name="lithologyFile" :before-upload="beforeUpload"
                                    @remove="handleRemove" :maxCount='1'>
                                    <a-button>
                                        <upload-outlined></upload-outlined>
                                        Click to Upload
                                    </a-button>
                                </a-upload>
                            </a-form-item>
                        </a-col>
                    </a-row>
                </a-form>
            </AntdConfirmModal>
        </div>
    </view>
</template>
<script setup>
import { ref } from 'vue';
import { cloneDeep } from 'lodash-es';
import { queryList, deleteOne, updateOne, createOne } from "@/api/geo/lithology.js";
import { PlusOutlined, UploadOutlined } from '@ant-design/icons-vue';
import request from '@/utils/request'
import useApp from "@/hooks";
const { $, proxy } = useApp();
const modalRef = ref(null);
const total = ref(1)
const fileList = ref([]);
const fileForm = ref({
    file: null,
})
const title = ref(null);
const searchKey = ref();
const query = ref({ pageNum: 1, pageSize: 10, sortBy: 'id', searchKey: '' });
const data = reactive({
    form: {}
});
const { form } = toRefs(data);
const dataSource = ref([]);
//定义表格列配置
const columns = [
    {
        title: '岩性代码',
        dataIndex: 'lithologyCode',
        key: 'lithologyCode',
        width: '20%'
    },
    {
        title: '岩性名称',
        dataIndex: 'lithologyName',
        key: 'lithologyName',
        width: '20%'
    },
    {
        title: '岩性类别',
        dataIndex: 'lithologyType',
        key: 'lithologyType',
        width: '20%'
    },
    {
        title: '岩性图',
        dataIndex: 'image',
        key: 'image',
        width: '20%'
    },
    {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
    }

];

const beforeUpload = file => {
    // 记录文件
    fileForm.value.file = file
    // 直接停止上传
    return false;
};
// 移除文件
const handleRemove = file => {
    fileForm.value.file = null
};

function uploadFile() {
    const formData = new FormData();
    formData.append('file', fileForm.value.file);
    formData.append('bucketName', 'test');
    request.post('/ufs/upload', formData, {
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    }).then(res => {
        form.value.lithologyFile = res.id;
        if (title.value == true) {
            createOne(form.value).then(res => {
                modalRef.value.closeModal();
                getList()
            });
        }
        else if (title.value == false) {
            updateOne(form.value).then(res => {
                modalRef.value.closeModal();
                getList()
            });
        }

        $.showToast({
            title: '上传成功',
            icon: 'success'
        })
        getList()
        modalRef.value.closeModal()
    })
}

function deleteFile(key) {
    request.delete('/disk/dirs/0/files/' + form.value.lithologyFile + '', {
        headers: {
            'Content-Type': 'application/json'
        }
    }).then(res => {
        form.value.lithologyFile = res.id;
        deleteOne(key).then(res => {
            $.showToast({
                title: '删除成功',
                icon: 'success'
            })
            getList()
        })
        $.showToast({
            title: '删除岩性图片成功',
            icon: 'success'
        })
        getList()
        modalRef.value.closeModal()
    })
};
// 删除
const del = key => {
    if (form.value.lithologyFile != null) {
        deleteFile(key)
    }
    else {
        deleteOne(key).then(res => {
            $.showToast({
                title: '删除成功',
                icon: 'success'
            })
            getList()
        })
    }
}

//编辑
function editItem(e) {
    form.value = e
    title.value = false
    modalRef.value.openModal()
}
// 新增
function addItem() {
    title.value = true
    form.value = {}
    modalRef.value.openModal()
}

/** 提交按钮 */
function submitForm() {
    if (fileForm.value.file != null) {
        uploadFile();
        return;
    }
    else if (title.value == true) {
        form.value.lithologyFile = null;
        createOne(form.value).then(res => {
            modalRef.value.closeModal();
            getList()
        })
    } else if (title.value == false) {
        form.value.lithologyFile = null;
        updateOne(form.value).then(res => {
            modalRef.value.closeModal();
            getList()
        })
    }
}


/** 查询井列表 */
function getList() {
    queryList(query.value).then((response) => {
        dataSource.value = response.content;
        total.value = response.totalElements;
    });
}
getList();


/** 搜索按钮操作 */
function handleQuery() {
    query.value.searchKey = searchKey;
    getList();
}

/** 表单重置 */
function reset() {
    searchKey.value = '';
    query.value = {
        pageNum: 1, pageSize: 5, sortBy: 'id',
        searchKey: '',
    }
    getList();
}
</script>